<template>
  <!-- <screen-adapter> -->
  <div
    class="v-views-risk"
    v-loading="loading"
    element-loading-text="数据加载中..."
  >
    <div class="title">
      隔离点风险管理看板
    </div>
    <div class="body-div">
      <div class="exhibition">
        <div class="big-div" style="">
          <div>
            <ul class="left_ul">
              <li
                v-for="(item, index) in personnelType"
                :key="index"
                class="left_li"
                :style="{ background: item.bgcolor }"
              >
                <span class="name">{{ item.value }}</span>
                <span>
                  <span>  <i :class="'iconfont icon-' + item.icon"></i>{{ item.name }}</span>
                 
                </span>
              </li>
            </ul>
          </div>
          <div style="margin-left:30px;flex:5">
            <ul class="left_ul right_ul">
              <li
                v-for="(item, index) in keepPersonnel"
                :key="index"
                class="left_li right_li"
                :style="{ background: item.bgcolor }"
              >
                <span class="name">{{ item.value }}</span>
                <span>
                   <i :class="'iconfont icon-' + item.icon"></i>{{ item.name }}</span
                >
              </li>
            </ul>
          </div>
          <div
            style="margin-left:30px;flex:3"
            :style="{ background: '#faad14a1' }"
          >
            <ul class="left_ul right_ul new_ul">
              <li
                v-for="(item, index) in otherData"
                :key="index"
                class="left_li right_li new_li"
              >
                <span class="name">{{ item.value }}</span>
                <span><i :class="'iconfont icon-' + item.icon"></i>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
        <el-row style="width:100%;height:50%">
          <ul class="symptoms-ul">
            <li
              class="symptoms-li"
              v-for="(item, index) in secondData"
              :key="index"
            >
              <el-popover
                v-if="index == secondData.length - 1"
                placement="top-start"
                width="365"
                trigger="hover"
              >
                <div>
                  <ul style="display:flex;flex-wrap: wrap;padding: 20px;">
                    <li
                      v-for="(item, index) in tenSymptoms"
                      :key="index"
                      style="width:33%;display: flex;
    flex-direction: column;margin-top: 10px;align-items: center;"
                    >
                      <span>{{ item.name }}</span>
                      <span
                        style="font-weight: bold;
    font-size: 24px;"
                        >{{ item.value }}</span
                      >
                    </li>
                  </ul>
                </div>
                <template slot="reference">
                  <span style="display:flex;flex-direction: column;">
                    <span class="name" style="text-align:center">{{
                      item.name
                    }}</span>
                    <span
                      >{{ item.value
                      }}<span style="font-size:15px">人</span></span
                    >
                  </span>
                </template>
              </el-popover>
              <template v-else>
                <span class="name">{{ item.name }}</span>
                <span
                  :style="{
                    'font-size': index == 0 ? '40px' : '',
                    'font-weight': index == 0 ? 'bold' : '',
                  }"
                  class="num-small"
                  >{{ item.value }}<span style="font-size:15px">人</span></span
                >
              </template>
            </li>
          </ul>
        </el-row>
      </div>
      <div class="indicator">
        <div class="statistics">
          <ul class="statistics-ul"></ul>
        </div>
        <div class="step">
          <ul class="step-ul">
            <li v-for="(item, index) in stepData" :key="index" class="step-li">
              <span class="big-spancir">
                <span class="circle">
                  <span class="scale" v-if="index > 0"> </span>
                  <span class="big-circle" v-if="item.state">
                    <span class="centerCircle"></span>
                  </span>
                </span>
                <span class="step-name">{{ item.name }}</span>
              </span>

              <span
                class="linellae"
                :class="{ active: index === 1 || index === 2 }"
              ></span>
            </li>
          </ul>
          <span class="management">
            <span class="big-spancir">
              <span class="circle"> </span>
              <span>居家管理</span>
            </span>
          </span>
        </div>
        <div class="wire-div">
          <div class="wire-title"></div>
          <div class="statistics-li" @click="shujukanban">
            <div class="single  title-single">
              <span class="num"
                >{{ statistics.geLiDianNum }}<span class="unit">个</span></span
              >
              <span><i class="iconfont icon-gelidian-mian"></i>隔离点数量</span>
            </div>
            <div class="even-numbers magin-top50">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.fangJianNum
                  }}<span class="unit">个</span></span
                >
                <span><i class="iconfont icon-fangjian"></i>房间数</span>
              </span>
              <span class="single">
                <span class="even-num"
                  >{{ statistics.gongZuoRenYuanNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-gongzuorenyuan"></i>工作人员数</span>
              </span>
            </div>
            <div class="even-numbers single-numbers">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.guanLiGeLiDianNum
                  }}<span class="unit">个</span></span
                >
                <span><i class="iconfont icon-xitongguanli"></i>纳入系统管理隔离点数量</span>
              </span>
            </div>
          </div>
          <div class="statistics-li statistics-li2" @click="shujukanban">
            <div class="single  title-single">
              <span class="num"
                >{{ statistics.geLiRenYuanNum
                }}<span class="unit">个</span></span
              >
              <span><i class="iconfont icon-gelirenyuan"></i>隔离人员数量</span>
            </div>
            <div class="even-numbers margin-top40">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.jianKangPaiChaNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-jichuguanli"></i>健康排查</span>
              </span>
              <span class="single">
                <span class="even-num"
                  >{{ statistics.xinLiPingGuNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-xinlike"></i>心理评估</span>
              </span>
            </div>
            <div class="even-numbers margin-top40">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.riChangJianCeNum
                  }}<span class="unit">人次</span></span
                >
                <span><i class="iconfont icon-zhengzhuangfenxi"></i>日常监测</span>
              </span>
              <span class="single">
                <span class="even-num"
                  >{{ statistics.xiaoShaNum }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-xiaoshazuoyechaxun"></i>消杀</span>
              </span>
            </div>
          </div>
          <div class="statistics-li" @click="shujukanban">
            <div class="even-div">
              <span class="even-span">
                <span class="num"
                  >{{ statistics.dangRiLiDianNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-dangrix"></i>当日离点</span>
              </span>
              <span class="even-span">
                <span class="num"
                  >{{ statistics.leiJiLiDianNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-leiji"></i>累计离点</span>
              </span>
            </div>
            <div class="even-numbers margin-top20">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.zhuanYiLiaoJiGouNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-yiliaojigou"></i>转医疗机构</span>
              </span>
              <span class="single">
                <span class="even-num"
                  >{{ statistics.shiNeiJuJiaNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-yiliaojigou"></i>转室内居家隔离</span>
              </span>
            </div>
            <div class="even-numbers single-numbers">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.zhuanShiWaiNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-yiliaojigou"></i>转市外隔离</span>
              </span>
            </div>
            <div class="even-numbers">
              <span class="single">
                <span class="even-num"
                  >{{ statistics.shiNeiWuXuGeLiNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-yiliaojigou"></i>市内无隔离</span>
              </span>
              <span class="single">
                <span class="even-num"
                  >{{ statistics.shiWaiWuXuGeLiNum
                  }}<span class="unit">人</span></span
                >
                <span><i class="iconfont icon-yiliaojigou"></i>市外无需隔离</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </screen-adapter> -->
</template>

<script>
import { staticalquery } from './index.js';
import '@/assets/icon/font_yz/iconfont.css';

export default {
  data() {
    return {
      loading: false,
      personnelType: [
        {
          name: '密接次密接',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'miqiejiechuzhe',
        },
        {
          name: '入境人员',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'churujing',
        },
        {
          name: '中高风险旅游史',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'lvyou5',
        },
        {
          name: '大数据排查重点人员',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'dashuju',
        },
      ],
      keepPersonnel: [
        {
          name: '老人',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'laoren1',
        },
        {
          name: '儿童',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'ertong',
        },
        {
          name: '孕妇',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'pregnant',
        },
        {
          name: '基础疾病',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'tingzhenqi',
        },
        {
          name: '心里疾病',
          value: 0,
          bgcolor: '#faad14a1',
          icon: 'xinli',
        },
      ],
      otherData: [
        { name: '前科', value: 0 ,icon: 'qianke-',},
        { name: '在逃', value: 0 ,icon: 'zaitaorenyuan',},
        { name: '表现异常', value: 0 ,icon: 'yichang',},
      ],
      secondData: [
        { name: '十大症状总数', value: 0 },
        { name: '人数最多（发热）', value: 0 },
        { name: '人数第二多（干咳）', value: 0 },
        { name: '其他', value: 0 },
      ],
      tenSymptoms: [
        { name: '乏力', value: 0 },
        { name: '鼻塞', value: 0 },
        { name: '流涕', value: 0 },
        { name: '咽痛', value: 0 },
        { name: '嗅觉-味觉减退', value: 0 },
        { name: '结膜炎', value: 0 },
        { name: '肌痛', value: 0 },
        { name: '腹泻', value: 0 },
      ],
      stepData: [
        { name: '转运', value: 0 },
        { name: '入住', value: 1, state: true },
        { name: '隔离', value: 2, state: true },
        { name: '离点', value: 3, state: true },
        // { name: '社区管理', value: 4 },
      ],
      statistics: {},
    };
  },
  mounted() {
    console.log('测试')
    this.getQuery();
  },
  methods: {
    async getQuery() {
      this.loading = true;
      try {
        const { data } = await staticalquery();
        this.loading = false;
        this.personnelType[0].value = data.data.data.miJieNum;
        this.personnelType[1].value = data.data.data.ruJingNum;
        this.personnelType[2].value = data.data.data.zhongGaoFengXianNum;
        this.personnelType[3].value = data.data.data.paiChaZhongDianNum;
        this.keepPersonnel[0].value = data.data.data.laoRenNum;
        this.keepPersonnel[1].value = data.data.data.erTongNum;
        this.keepPersonnel[2].value = data.data.data.yunFuNum;
        this.keepPersonnel[3].value = data.data.data.jiChuJiBingNum;
        this.keepPersonnel[4].value = data.data.data.xinLiJiBingNum;
        this.otherData[0].value = data.data.data.qianKeNum;
        this.otherData[1].value = data.data.data.zaiTaoNum;
        this.otherData[2].value = data.data.data.biaoXianYiChangNum;
        this.secondData[0].value = data.data.data.shiDaZongShuNum;
        this.secondData[1].value = data.data.data.renShuZuiDuoNum.num;
        this.secondData[2].value = data.data.data.renShuDiErDuoNum.num;
        this.secondData[1].name = data.data.data.renShuZuiDuoNum.name;
        this.secondData[2].name = data.data.data.renShuDiErDuoNum.name;
        this.secondData[3].value = data.data.data.qiTaNum;
        this.tenSymptoms[0].value = data.data.data.faLiNum;
        this.tenSymptoms[1].value = data.data.data.biSaiNum;
        this.tenSymptoms[2].value = data.data.data.liuTiNum;
        this.tenSymptoms[3].value = data.data.data.yanTongNum;
        this.tenSymptoms[4].value = data.data.data.xiuJueWeiJueJianTuiNum;
        this.tenSymptoms[5].value = data.data.data.jieMoYanNum;
        this.tenSymptoms[6].value = data.data.data.jiTongNum;
        this.tenSymptoms[7].value = data.data.data.fuXieNum;
        this.statistics = { ...data.data.data };
        this.loading = false;
      } catch {
        this.loading = false;
      }
    },
    shujukanban() {
      this.$router.push({ path: '/gl/bulletinboard' });
    },
  },
};
</script>

<style lang="scss" scoped>
.v-views-risk {
  .title {
    width: 100%;
    height: 80px;
    line-height: 74px;
    padding: 0 60px;
    background: linear-gradient(90deg, #4d9cfd 0%, #7662d5 100%);
    border-radius: 6px;
    font-size: 36px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
  }
  .body-div {
    padding: 20px;
    overflow-x: hidden;
    .exhibition {
      background: #f6faff;
      border-radius: 6px;
      padding: 20px;
      height: calc(100vh - 580px);
      .big-div {
        width: 100%;
        display: flex;
        height: calc(50% - 10px);
        div {
          flex: 4;
        }
        .left_ul {
          display: flex;
          height: 100%;
          .left_li {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            span {
              font-size: 15px;
              font-weight: bold;
              color: white;
              height: 40px;
              margin-top: 11px;
            }
            .name {
              margin-bottom: 10px;
              font-size: 40px;
              font-weight: bold;
            }
          }
        }
        .right_ul {
          .right_li {
            cursor: pointer;
            width: 20%;
          }
        }
        .new_ul {
          .new_li {
            cursor: pointer;
            width: 33.3%;
          }
        }
      }

      .symptoms-ul {
        width: 50%;
        background: #ff913d;
        display: flex;
        margin: 0 auto;
        margin-top: 20px;
        height: calc(100% - 10px);
        .symptoms-li {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 30px;
          color: white;
          cursor: pointer;
          .name {
            font-size: 16px;
            margin-bottom: 15px;
          }
        }
      }
    }

    .indicator {
      background: #f6faff;
      margin-top: 20px;
      height: 430px;
      // height: calc(100vh - 590px);
      padding-top: 20px;
      position: relative;
      .step {
        padding: 0 30px;
        position: absolute;
        width: 100%;
        bottom: 10px;
        .step-ul {
          display: flex;
          width: 100%;
          .step-li {
            width: 30%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            position: relative;
            .big-spancir {
              display: flex;
              flex-direction: column;
              .step-name {
                font-size: 20px;
                font-weight: bold;
              }
              .circle {
                display: inline-block;
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: white;
                box-shadow: 0px 0px 8px 0px rgba(0, 171, 213, 0.09),
                  0px 0px 8px 0px rgba(90, 178, 255, 0.3);
                margin-bottom: 10px;
                position: relative;
                z-index: 10;
                left: 4px;
                .big-circle {
                  display: inline-block;
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                  background: rgba(113, 205, 255, 0.2);
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  margin-left: -9px;
                  margin-top: -9px;
                  .centerCircle {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: #4e9dfd;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -6px;
                    margin-top: -6px;
                  }
                }
                .scale {
                  display: inline-block;
                  position: absolute;
                  height: 15px;
                  border: 1px dashed #4e9dfd;
                  left: 50%;
                  top: -15px;
                }
              }
            }

            .linellae {
              display: inline-block;
              width: 100%;
              height: 4px;
              background: #ebebeb;

              position: relative;
              top: -56px;
              left: 14px;
            }
          }
          .step-li:first-child {
            width: 20%;
          }
          .step-li:last-of-type {
            width: 20%;
            .linellae {
              width: 95%;
            }
          }
        }
      }
      .statistics {
        .statistics-ul {
          width: 10%;
          display: flex;
        }
      }
    }
  }
  .wire-div {
    width: 100%;
    position: absolute;
    display: flex;
    height: 300px;
    bottom: 99px;
    left: 5%;
  }
  .statistics-li {
    width: 23%;
    background: linear-gradient(135deg, #61a8ff 0%, #4e9dfd 100%);
    border-radius: 8px;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    bottom: 90px;
    cursor: pointer;
    margin-left: 6%;
    .single {
      text-align: center;
      display: flex;
      flex-direction: column;
      font-size: 15px;
      margin-top: 15px;
      .num {
        font-size: 25px;
      }
    }
    .even-numbers {
      display: flex;
      justify-content: space-between;
      .even-num {
        font-size: 20px;
      }
    }
    .single-numbers {
      justify-content: center;
    }
    .magin-top50 {
      margin-top: 0;
    }
    .margin-top40 {
      margin-top: 0px;
    }
    .margin-top20 {
      margin-top: 15px;
    }
    .title-single {
      border-bottom: 1px solid #8ec0ff;
      padding-bottom: 15px;
      margin-top: 0;
      .num {
        font-size: 35px;
      }
    }
    .unit {
      font-size: 15px;
    }
    .even-div {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #8ec0ff;
      padding-bottom: 15px;
      .even-span {
        display: flex;
        flex-direction: column;
        font-size: 15px;
        span {
          text-align: center;
        }
        .num {
          font-size: 35px;
        }
      }
    }
  }
  .statistics-li:last-of-type {
    .single {
      margin-top: 0;
    }
  }
  .active {
    background: #4e9dfd !important;
  }
  @media screen and (min-height: 1100px) {
    .exhibition {
      font-size: 50px;
    }
    .left_li {
      .name {
        font-size: 50px !important;
      }
    }
    .symptoms-ul {
      .symptoms-li {
        font-size: 50px !important;
        .num-small {
          font-size: 50px !important;
        }
      }
    }
  }
  .management {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 20px;
    font-weight: bold;
    .big-spancir {
      display: flex;
      flex-direction: column;
      .circle {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin: 0 auto;
        border-radius: 50%;
        background: white;
        box-shadow: 0px 0px 8px 0px rgba(0, 171, 213, 0.09),
          0px 0px 8px 0px rgba(90, 178, 255, 0.3);
        margin-bottom: 10px;
        position: relative;
        z-index: 10;
        .big-circle {
          display: inline-block;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: rgba(113, 205, 255, 0.2);
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -9px;
          margin-top: -9px;
          .centerCircle {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4e9dfd;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -6px;
            margin-top: -6px;
          }
        }
        .scale {
          display: inline-block;
          position: absolute;
          height: 15px;
          border: 1px dashed #4e9dfd;
          left: 50%;
          top: -15px;
        }
      }
    }
  }
  .connect-div {
    width: 40%;
    height: 20px;
    border: 1px solid red;
    position: absolute;
    top: 60px;
    left: 27%;
    border-bottom-style: none;
  }
  .top-indicator {
    top: 10px;
  }
  .statistics-li2 {
    .even-numbers {
      // margin-top: 20px;
    }
  }
  .iconfont{
    margin-right: 5px;
  }
}
</style>
